<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="年份">
        <el-input v-model="formInline.year" placeholder="请输入年份" />
      </el-form-item>
      <el-form-item label="月份">
        <el-select v-model="formInline.yuefen" placeholder="请选择月份">
          <el-option
            v-for="(month, index) in months"
            :key="index"
            :label="month.label"
            :value="month.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关键词">
        <el-input
          v-model="formInline.user"
          placeholder="请选择团队负责人姓名/手机号码关键词查询"
          style="width: 300px;"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onExport">导出名单</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <!-- 序号 -->
      <el-table-column align="center" label="序号" width="55">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <!-- 预约人姓名 -->
      <el-table-column label="团体名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="团体人数">
        <template slot-scope="scope">
          {{ scope.row.number }}
        </template>
      </el-table-column>

      <el-table-column label="团体负责人姓名" width="120">
        <template slot-scope="scope">
          {{ scope.row.name111 }}
        </template>
      </el-table-column>

      <!-- 证件类型 -->
      <el-table-column label="证件类型" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.idType }}
        </template>
      </el-table-column>

      <!-- 证件号码 -->
      <el-table-column label="证件号码" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.idNumber }}
        </template>
      </el-table-column>

      <!-- 手机号码 -->
      <el-table-column label="手机号码" width="130" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>

      <!-- 同行儿童数 -->
      <el-table-column label="同行负责人" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.childrenCount }}
        </template>
      </el-table-column>

      <!-- 预约入园时间 -->
      <el-table-column label="预约入园时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.entryTime }}
        </template>
      </el-table-column>

      <!-- 登记时间 -->
      <el-table-column label="登记时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.registerTime }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
      style="margin: 10px;"
    />
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
export default {
  data() {
    return {
      list: [],
      listLoading: false,
      formInline: {
        year: '',
        yuefen: '',
        user: ''
      },
      months: [
        { label: '一月份', value: 'January' },
        { label: '二月份', value: 'February' },
        { label: '三月份', value: 'March' },
        { label: '四月份', value: 'April' },
        { label: '五月份', value: 'May' },
        { label: '六月份', value: 'June' },
        { label: '七月份', value: 'July' },
        { label: '八月份', value: 'August' },
        { label: '九月份', value: 'September' },
        { label: '十月份', value: 'October' },
        { label: '十一月份', value: 'November' },
        { label: '十二月份', value: 'December' }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      // 发起查询请求
      setTimeout(() => {
        // 在这里你可以替换成实际的 API 请求
        this.list = this.mockData().filter(item => {
          const yearMatch = this.formInline.year ? item.entryTime.startsWith(this.formInline.year) : true
          const monthMatch = this.formInline.yuefen ? item.entryTime.includes(this.formInline.yuefen) : true
          const userMatch = this.formInline.user ? item.name.includes(this.formInline.user) || item.phone.includes(this.formInline.user) : true
          return yearMatch && monthMatch && userMatch
        })
        this.listLoading = false
      }, 1000)
    },
    mockData() {
      // 模拟生成 20 条数据
      const mockList = []
      for (let i = 1; i <= 20; i++) {
        const childrenCount = Math.floor(Math.random() * 3) // 随机生成 0-2 个儿童数
        const adultCount = Math.floor(Math.random() * 4) // 随机生成 0-3 个成人数

        mockList.push({
          name: `团队${i}`,
          idType: i % 2 === 0 ? '身份证' : '护照',
          idNumber: `1234567890${i}`,
          number: `23${i}`,
          name111: '张三',
          phone: `18888888${i}`,
          childrenCount: childrenCount,
          adultCount: adultCount,
          entryTime: `2024-09-${Math.floor(Math.random() * 30 + 1)} 10:00`, // 随机生成日期
          registerTime: `2024-09-${Math.floor(Math.random() * 30 + 1)} 09:00`, // 随机生成登记时间
          // 根据同行儿童数或成人数决定是否需要 children
          children: childrenCount > 0 || adultCount >= 1 ? [
            {
              id: `${i}-child1`,
              name: `儿童1`,
              childrenCount: 0,
              adultCount: 0
            },
            {
              id: `${i}-child2`,
              name: `儿童2`,
              childrenCount: 0,
              adultCount: 0
            }
          ] : []
        })
      }
      return mockList
    },
    onSubmit() {
      this.fetchData()
    },
    onReset() {
      this.formInline = {
        year: '',
        yuefen: '',
        user: ''
      }
      this.fetchData()
    },
    onExport() {
      console.log('导出名单')
      // 定义导出的数据
      const data = [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' },
        { name: '王五', age: 28, city: '广州' }
      ]
      // 将 JSON 数据转换为工作表 (worksheet)
      const worksheet = XLSX.utils.json_to_sheet(data)

      // 创建一个新的工作簿 (workbook)
      const workbook = XLSX.utils.book_new()

      // 将工作表添加到工作簿中
      XLSX.utils.book_append_sheet(workbook, worksheet, '用户数据')

      // 生成 Excel 文件并导出
      XLSX.writeFile(workbook, '用户数据.xlsx')
    }
  }
}
</script>
